<template>
	<el-dialog :model-value="modelValue" show-close-icon @close="() => emit('update:modelValue', false)" width="20%">
		<div class="emoji-container">
			<div v-for="(item, index) in emojis" :key="index" class="emoji-item" @click="selectEmoji(item)">
				{{ item }}
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	}
});

const emit = defineEmits(['update:modelValue', 'change']);

const emojis = ref([
	'😀', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂',
	'😊', '😇', '😍', '🤩', '😘', '😷', '😎', '😤',
	'🤬', '💩', '🤡', '👻', '💖', '💥'
]);

const selectEmoji = (e: string) => {
	emit('change', e);
	emit('update:modelValue', false);
};
</script>

<style scoped lang="scss">
.emoji-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
	gap: 10px;
	width: 300px;
	height: 200px;
	overflow-y: auto;
	padding: 10px;
	margin: 0 auto;
	/* 隐藏滚动条（适用于 Chrome、Safari 和 Opera） */
	&::-webkit-scrollbar {
		display: none;
	}
	/* 隐藏滚动条（适用于 Firefox） */
	scrollbar-width: none;
}

.emoji-item {
	font-size: 24px;
	cursor: pointer;
	transition: transform 0.2s ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;

	&:hover {
		transform: scale(1.2);
	}
}
</style>

